<template>
  <div class="header-left sa-flex">
    <template v-if="pageType != 'diypage'">
      <div
        class="oper-button"
        :class="pageType == ptl.type ? 'is-active' : ''"
        v-for="ptl in pageTypeList"
        :key="ptl"
        @click="emit('changePageType', ptl.type)"
      >
        <el-popover popper-class="sa-popper" trigger="hover" :content="ptl.label">
          <template #reference>
            <sa-icon :icon="'sa-shop-decorate-' + ptl.type" size="24" />
          </template>
        </el-popover>
      </div>
    </template>
  </div>
  <div class="header-center is-mobile sa-flex sa-flex-1">
    <el-divider direction="vertical"></el-divider>
    <template v-for="sl in systemList" :key="sl">
      <el-popover popper-class="sa-popper" trigger="hover" :content="sl.label">
        <template #reference>
          <sa-icon
            :icon="'sa-shop-decorate-' + sl.type"
            size="24"
            :style="{ color: systemType == sl.type ? sl.color : '' }"
            @click="emit('update:systemType', sl.type)"
          />
        </template>
      </el-popover>
    </template>
    <el-divider direction="vertical"></el-divider>
    <template v-for="pl in platformList" :key="pl">
      <el-popover popper-class="sa-popper" trigger="hover" :content="pl.label">
        <template #reference>
          <sa-icon
            :icon="'sa-shop-decorate-' + pl.type"
            size="24"
            :style="{ color: platformType == pl.type ? pl.color : '' }"
            @click="emit('update:platformType', pl.type)"
          ></sa-icon>
        </template>
      </el-popover>
    </template>
    <el-divider direction="vertical"></el-divider>
    <el-popover popper-class="sa-popper" trigger="hover" content="页面设置">
      <template #reference>
        <div>
          <sa-icon
            v-if="pageType != 'basic'"
            icon="sa-shop-decorate-page"
            size="24"
            :style="{ color: currentCompIndex == -1 ? 'var(--el-color-primary)' : '' }"
            @click="emit('updatePageSetting')"
          ></sa-icon>
        </div>
      </template>
    </el-popover>
  </div>
  <div class="header-right sa-flex">
    <slot name="operWrap"></slot>
  </div>
</template>
<script setup>
  /**
   * @property {String} pageType 页面类型
   * @property {String} systemType 系统类型
   * @property {String} platformType 平台类型
   */
  import { pageTypeList, systemList, platformList } from '../data';

  const emit = defineEmits([
    'changePageType',
    'update:systemType',
    'update:platformType',
    'updatePageSetting',
  ]);
  const props = defineProps(['pageType', 'systemType', 'platformType', 'currentCompIndex']);
</script>
